import React, {Component} from "react";
import {Card, Icon, List} from "antd"
import LinkButton from "../../components/link-button";

const Item = List.Item
// 商品详情
export default class Detail extends Component {
    render() {
        // 读取携带过来的product数据
        const {name, desc, price, detail, imgs} = this.props.location.state.product



        const title = (
            <span>
               <LinkButton>
                    <Icon type="arrow-left"
                          style={{color: 'green', marginRight: 10, fontSize: 20}}
                          onClick={() => this.props.history.goBack()}
                    />
               </LinkButton>
                <span>商品详情</span>
            </span>
        )
        return (
            <Card title={title} className="product-detail">
                <List>
                    <Item style={{justifyContent: 'flex-start'}}>
                        <span className='left'>商品名称:</span>
                        <span>{name}</span>
                    </Item>
                    <Item style={{justifyContent: 'flex-start'}}>
                        <span className='left'>商品描述:</span>
                        <span>{desc}</span>
                    </Item>
                    <Item style={{justifyContent: 'flex-start'}}>
                        <span className='left'>商品价格:</span>
                        <span>¥{price}</span>
                    </Item>
                    <Item style={{justifyContent: 'flex-start'}}>
                        <span className='left'>所属分类:</span>
                        <span>电脑-->笔记本</span>
                    </Item>
                    <Item style={{justifyContent: 'flex-start'}}>
                        <span className='left'>商品图片</span>
                        {
                            imgs.map(img => (
                                    <img className="product-img" src={img} alt="img"/>
                                )
                            )
                        }


                    </Item>

                    <Item>
                        <span className='left'>商品详情</span>
                        <span dangerouslySetInnerHTML={{__html: '<h1 style="color: red">商品详情内容标题</h1>'}}></span>
                    </Item>
                </List>
            </Card>
        )
    }
}
